<template>
	<view class="tm-actionSheetMenu">
		<tm-poup  @change="toogle" ref="pop" :black="false" v-model="showpop" height="auto" bg-color="none">
			
				
			<view class="ma-32">
				
				<view class=" round-4 overflow ">
					<tm-button :black="black_tmeme" iteme-class="mb-2" font-size="22" font-color="grey" :theme="black_tmeme?'grey-darken-4':'white'" block flat>{{title}}</tm-button>
					<slot>
						<tm-button
						 :black="black_tmeme"
						 @click="onclick(index,item)" 
						 v-for="(item,index) in actions"  
						 :key="index" 
						 :iteme-class="'text-'+color_tmeme"
						 :theme="black_tmeme?'grey-darken-4':'white'" block flat>{{item[rangKey]?item[rangKey]:item}}</tm-button>
					</slot>
				</view>
				<view style="height: 96upx " class="pb-24 pt-16">
					<tm-button :iteme-class="' text-weight-b text-'+color_tmeme"  :black="black_tmeme" @click="close" round="4"  :theme="black?'grey-darken-4':'white'" block >取消</tm-button>
				</view>
			</view>
		</tm-poup>
	</view>
</template>

<script>
	/**
	 * 动作面板
	 * @description 动作面板,从底部弹出的操作菜单。
	 * @property {Boolean} black = [true|false] 默认：null，暗黑模式 
	 * @property {Boolean} value = [true|false] 默认：false，显示菜单，推荐使用v-model,使用value.sync达到双向绑定。
	 * @property {String} title = [] 默认：'请操作',弹出层的标题。
	 * @property {Array} actions = [] 默认：[],可以是对象数组，也可是字符串数组。
	 * @property {String} rang-key = [title] 默认：title,actions对象数组时，需要提供自定义标题键。
	 * @property {Boolean} click-close = [true|false] 默认：true,点击项目时，是否自动关闭弹层。
	 * @property {Boolean} font-color = [] 默认：primary,文字颜色。可以是主题颜色，也可以是颜色格式rgb,rgba,#ff0000格式
	 * @property {Function} change 点击项目时触发,返回：{index:项目索引,data:actions的对象数据}
	 * @property {Function} input 弹层显示和隐藏时，将会触发。
	 * @example <tm-actionSheetMenu  :value="true" :actions="['说明文档','说明文档']"></tm-actionSheetMenu>
	 */

	import tmPoup from "@/tm-vuetify/components/tm-poup/tm-poup.vue"
	import tmButton from "@/tm-vuetify/components/tm-button/tm-button.vue"
	export default {
		components:{tmButton,tmPoup},
		name:"tm-actionSheetMenu",
		model:{
			prop:'value',
			event:'input'
		},
		props:{
			value:{
				type:Boolean,
				default:false
			},
			black:{
				type:Boolean,
				default:null
			},
			title:{
				type:String,
				default:'请操作'
			},
			fontColor:{
				type:String,
				default:'primary'
			},
			actions:{
				type:Array,
				default:()=>{
					return [];
				}
			},
			// 自定义标题键key.
			rangKey:{
				type:String,
				default:'title'
			},
			// 点击项目时，是否关闭弹层
			clickClose:{
				type:Boolean,
				default:true
			},
			// 跟随主题色的改变而改变。
			fllowTheme:{
				type:Boolean|String,
				default:true
			}
		},
		data() {
			return {
				showpop:false,
			};
		},
		mounted() {
			this.showpop = this.value;
		},
		computed:{
			color_tmeme:function(){
				if(this.$tm.vx.state().tmVuetify.color!==null&&this.$tm.vx.state().tmVuetify.color && this.fllowTheme){
					return this.$tm.vx.state().tmVuetify.color;
				}
				return this.fontColor;
			},
			black_tmeme: function() {
				if (this.black !== null) return this.black;
				return this.$tm.vx.state().tmVuetify.black;
			}
		},
		watch:{
			value:function(val){
				this.showpop = val;
			}
		},
		methods: {
			close(){
				this.$refs.pop.close();
			},
			toogle(e){
				let t = this;
				if(e){
					this.$nextTick(function(){
						if(this.dataValue != this.defaultValue){
							this.dataValue = this.defaultValue;
						}
					})
				}
				this.$emit('input',e);
				this.$emit('update:value',e);
			},
			onclick(index,item){
				this.$emit('change',{index:index,data:item})
				if(this.clickClose === true){
					this.$refs.pop.close();
				}
			}
		},
	}
</script>

<style lang="scss" scoped>
	.tm-actionSheetMenu-title {
		.tm-actionSheetMenu-close {
			top: 32upx;
			right: 32upx;
			width: 50upx;
			height: 50upx;
		}
	}
</style>
